<template>
  <view>
    <u-navbar
      backIconColor="#fff"
      :is-back="true"
      title-color="#fff"
      title="提交订单"
      :background="scrollTop >= 100 ? background1 : background"
      :border-bottom="false"
    >
    </u-navbar>
    <view class="" style="position: relative">
      <view
        class="contentBg"
        :style="{
          paddingTop: `${statusBarHeight + navbarHeight}px`,
          backgroundImage: `url(${getImageUrl('bg.png')})`,
          height: `${200 + statusBarHeight}px`,
          top: `-${statusBarHeight + navbarHeight}px`
        }"
      >
      </view>
    </view>
    <view v-if="orderInfo" style="position: relative; top: 20rpx; padding-bottom: 96rpx">
      <view class="locationView dervier-type">
        <view v-if="deliveryTab" class="type-tabs dis-flex flex-y-between">
          <view class="type">{{ deliveryTab === 'pickup' ? '自取' : '外卖' }}</view>
          <view class="type unchecked disabled"
            >{{ deliveryTab === 'pickup' ? '外卖' : '自取' }}
          </view>
        </view>
        <view v-else class="type-tabs dis-flex flex-y-between">
          <view
            v-if="
              orderInfo.supportDeliveryTypes &&
              orderInfo.supportDeliveryTypes.find((item) => item == 1)
            "
            @click="checkType(1)"
            :class="form.deliveryType == 1 ? '' : 'unchecked'"
            class="type"
          >
            快递发货
          </view>
          <view
            v-if="
              orderInfo.supportDeliveryTypes &&
              orderInfo.supportDeliveryTypes.find((item) => item == 3)
            "
            @click="checkType(3)"
            :class="form.deliveryType == 3 ? '' : 'unchecked'"
            class="type"
            >同城配送
          </view>
          <view
            v-if="
              orderInfo.supportDeliveryTypes &&
              orderInfo.supportDeliveryTypes.find((item) => item == 4)
            "
            @click="checkType(4)"
            :class="form.deliveryType == 4 ? '' : 'unchecked'"
            class="type"
            >现场核销
          </view>
          <view
            v-if="
              orderInfo.supportDeliveryTypes &&
              orderInfo.supportDeliveryTypes.find((item) => item == 2)
            "
            @click="checkType(2)"
            :class="form.deliveryType == 2 ? '' : 'unchecked'"
            class="type"
            >到店自提
          </view>
        </view>

        <view v-if="form.deliveryType == 1 || form.deliveryType == 3">
          <view
            v-if="orderInfo.address"
            class="addressView"
            style="flex-flow: column; margin-top: 20rpx; align-items: flex-start"
            @click="onPickupAddress"
          >
            <view
              class="shopView-location dis-flex flex-y-between"
              style="margin-bottom: 20rpx; width: 100%"
            >
              <view
                >{{ orderInfo.address.areaName }}&nbsp;{{
                  orderInfo.address.detailAddress.replace(dineRoomNumber, '')
                }}{{ dineRoomNumber }}
              </view>
              <u-icon size="28" name="/static/more.png"></u-icon>
            </view>
            <view class="dis-flex">
              <u-icon size="28" name="/static/dw-g.png"></u-icon>
              <view
                v-if="orderInfo.address.name && orderInfo.address.mobile"
                class="addName"
                style="font-size: 28rpx"
              >
                {{ orderInfo.address.name + ' ' + orderInfo.address.mobile }}
              </view>
              <view v-else class="addName" style="font-size: 28rpx; color: red">
                点击设置联系人信息
              </view>
            </view>
          </view>
          <view v-else class="addressView" @click="onPickupAddress">
            <u-icon size="28" name="/static/dw-g.png" style="margin-top: 4rpx"></u-icon>
            <view class="location">
              <view class="address" style="font-size: 28rpx; color: red">点击设置联系人信息</view>
            </view>
            <u-icon size="28" name="/static/more.png"></u-icon>
          </view>
        </view>
        <view v-if="form.deliveryType == 2 || form.deliveryType == 4">
          <view class="shopView">
            <view class="shopView-location">
              <text>商家地址：</text>
              <text>{{ orderInfo.shop.fullAddress }}</text>
            </view>
            <view class="phone">
              <text>联系方式：</text>
              <text>{{ orderInfo.shop.contactMobile }}</text>
            </view>
          </view>
        </view>

        <!-- 外卖：立即配送及预约配送 -->
        <view v-if="deliveryTab" class="delivery-time-section">
          <view class="time-option" @click="selectDeliveryTime('immediate')">
            <view class="option-content">
              <text class="option-label">立即配送</text>
              <u-icon
                name="checkbox-mark"
                :color="form.deliveryTimeType === 'immediate' ? '#10a28f' : '#eee'"
                size="36"
              ></u-icon>
            </view>
          </view>
          <view class="time-option" @click="selectDeliveryTime('scheduled')">
            <view class="option-content">
              <text class="option-label">预约配送</text>
              <text class="option-label" style="color: #666; font-size: 28rpx"
                >{{ form.reserveDate || '请选择送达时间' }} {{ form.reservePeriod || '' }}</text
              >
              <u-icon
                name="checkbox-mark"
                :color="form.deliveryTimeType === 'scheduled' ? '#10a28f' : '#eee'"
                size="36"
              ></u-icon>
            </view>
          </view>
        </view>
      </view>

      <view class="infoView">
        <view class="goodsView" v-for="(item, index) in orderInfo.items" :key="index">
          <u-image width="160" height="160" :src="item.picUrl" border-radius="10"></u-image>
          <view class="goodsData">
            <text class="goodsTitle oneline-hide-1">{{ item.spuName }}</text>
            <view class="skuView">
              <view class="goodsSku">
                <text v-if="item.properties">{{ formatProp(item.properties) }}</text>
                <text class="goodsNum" style="margin-left: 20rpx"
                  >{{ item.count }}{{ item.unitValue > 1 ? 'x' + item.unitValue : ''
                  }}{{ item.unitName || '' }}
                </text>
              </view>
              <text class="goodsNum" v-if="item.weight"
                >约{{ parseInt(item.count * item.weight * 1000) }}克
              </text>
            </view>
            <view class="price" style="margin-top: 10rpx">
              <text class="">原价:</text>
              <text>¥{{ formatPrice(item.price) }}</text>
              <text class="goodsPrice" style="margin-left: 20rpx">
                会员价:¥{{ formatPrice(item.vipPrice) }}
              </text>
            </view>
            <view class="price" style="margin-top: 10rpx">
              <view
                class="point"
                style="margin-left: 0"
                v-if="item.pointDeductCount && item.cryptocurrencyDeductCount"
              >
                {{ item.pointDeductCount }}收益豆抵¥{{ item.pointDeductPriceYuan }} &nbsp;&nbsp;{{
                  item.cryptocurrencyDeductCount
                }}收益豆抵¥{{ item.cryptocurrencyDeductPriceYuan }}
              </view>
              <view class="point" style="margin-left: 0" v-else-if="item.pointDeductCount">
                {{ item.pointDeductCount }}收益豆抵¥{{ item.pointDeductPriceYuan }}
              </view>
              <view class="point" style="margin-left: 0" v-else-if="item.cryptocurrencyDeductCount">
                {{ item.cryptocurrencyDeductCount }}收益豆抵¥{{
                  item.cryptocurrencyDeductPriceYuan
                }}
              </view>
            </view>
            <view class="flex-1"></view>
          </view>
        </view>
      </view>
      <view class="infoView">
        <view
          class="totalView"
          style="padding-bottom: 10rpx"
          @click="onPreAll(PreType == 1 ? 0 : 1)"
        >
          <view class="totalTitle">
            <text>原价</text>
          </view>
          <view class="dis-flex flex-x-center">
            <view class="mr-20">¥{{ formatPrice(orderInfo.price.totalPrice) }}</view>
            <u-icon name="/static/selected.png" size="36rpx" v-if="PreType == 1"></u-icon>
            <u-icon v-else name="/static/unselect.png" size="36rpx"></u-icon>
          </view>
        </view>

        <view
          class="totalView"
          v-if="!hasActive && pointDeductCount"
          @click="onPrePoints(PrePoints == 1 ? 0 : 1)"
        >
          <view class="totalTitle">积分({{ orderInfo.totalPoint }}个)</view>
          <view class="dis-flex flex-x-center">
            <view class="point mr-20" style="font-size: 28rpx">
              {{ pointDeductCount }}积分抵扣{{ formatPrice(pointDeductPriceYuan) }}元
            </view>
            <u-icon name="/static/selected.png" size="36rpx" v-if="PrePoints == 1"></u-icon>
            <u-icon v-else name="/static/unselect.png" size="36rpx"></u-icon>
          </view>
        </view>
        <view
          class="totalView"
          v-if="!hasActive && cryptocurrencyDeductCount"
          @click="onPrePoints(PrePoints == 2 ? 0 : 2)"
        >
          <view class="totalTitle">联盟豆({{ orderInfo.totalCryptocurrency }}个)</view>
          <view class="dis-flex flex-x-center">
            <view class="point mr-20" style="font-size: 28rpx">
              {{ cryptocurrencyDeductCount }}收益豆抵扣{{ cryptocurrencyDeductPriceYuan }}元
            </view>
            <u-icon name="/static/selected.png" size="36rpx" v-if="PrePoints == 2"></u-icon>
            <u-icon v-else name="/static/unselect.png" size="36rpx"></u-icon>
          </view>
        </view>
        <u-line
          v-if="!hasActive && orderInfo.firstOrderDiscount > 0 && orderInfo.firstOrderDiscount < 10"
        ></u-line>
        <view
          class="totalView"
          v-if="!hasActive && orderInfo.firstOrderDiscount > 0 && orderInfo.firstOrderDiscount < 10"
          style="padding-bottom: 20rpx"
          @click="onPreAll(3)"
        >
          <view class="totalTitle">
            <text>首单优惠</text>
            <text
              class="point"
              v-if="orderInfo.firstOrderDiscount > 0 && orderInfo.firstOrderDiscount < 10"
              >本单享{{ orderInfo.firstOrderDiscount.toFixed(1) }}折</text
            >
          </view>
          <view class="dis-flex flex-x-center">
            <view class="mr-20">
              ¥{{ formatPrice((orderInfo.firstOrderDiscount * orderInfo.price.totalPrice) / 10) }}
            </view>
            <u-icon name="/static/selected.png" size="36rpx" v-if="PreType == 3"></u-icon>
            <u-icon v-else name="/static/unselect.png" size="36rpx"></u-icon>
          </view>
        </view>
        <u-line
          v-if="
            !hasActive &&
            orderInfo.price.totalVipPrice &&
            (orderInfo.firstOrderDiscount <= 0 || orderInfo.firstOrderDiscount >= 10)
          "
        ></u-line>
        <view
          class="totalView"
          v-if="
            !hasActive &&
            orderInfo.price.totalVipPrice &&
            (orderInfo.firstOrderDiscount <= 0 || orderInfo.firstOrderDiscount >= 10)
          "
          @click="onPreAll(PreType == 2 ? 0 : 2)"
        >
          <view class="totalTitle dis-flex flex-y-center">
            <text>会员价</text>
            <text class="point" v-if="discount < 10">本单享{{ discount }}折</text>
          </view>
          <view class="dis-flex flex-x-center">
            <view class="mr-20">¥{{ formatPrice(orderInfo.price.totalVipPrice) }}</view>
            <u-icon name="/static/selected.png" size="36rpx" v-if="PreType == 2"></u-icon>
            <u-icon v-else name="/static/unselect.png" size="36rpx"></u-icon>
          </view>
        </view>
        <view
          @click="toSvip()"
          class="open-vip"
          v-if="!hasActive && !isVip && discount > 0 && discount < 10"
        >
          <view class="vip-tl dis-flex flex-y-center">
            <view
              class="bt dis-flex flex-y-center flex-x-center"
              style="width: 100rpx; margin-right: 10rpx"
            >
              <u-icon class="bt-icon" name="/static/vip.png" size="36rpx"></u-icon>
              <text>VIP</text>
            </view>
            <view class="des">
              <text>开通会员，本单立享</text>
              <text class="col bold">{{ discount }}</text>
              <text class="col">折</text>
              <text>优惠</text>
            </view>
          </view>
          <view class="vip-qy" v-if="cards">
            会员费：充¥{{ (cards.deductPrice * 0.01).toFixed(0) }}送{{ cards.givePoint }}积分
          </view>
          <view class="description" v-if="cards">{{ cards.days }}天有效期 到期前可续费</view>
        </view>
        <u-line v-if="orderInfo.dinePeoples > 0"></u-line>
        <view class="totalView" v-if="orderInfo.dinePeoples > 0">
          <text class="totalTitle">用餐人数</text>
          <view class="totalPrice">
            <u-number-box
              v-model="orderInfo.dinePeoples"
              :min="1"
              :disabled-input="false"
              @change="onDinePeoples"
              @minus="onDinePeoples"
              @plus="onDinePeoples"
            ></u-number-box>
          </view>
        </view>
        <u-line></u-line>
        <view v-if="form.deliveryType === 1" class="totalView">
          <text class="totalTitle">运费</text>
          <text>¥{{ formatPrice(orderInfo.price.deliveryPrice) }}</text>
        </view>
        <view v-if="form.deliveryType === 3" class="totalView">
          <text class="totalTitle">配送费</text>
          <text>¥{{ formatPrice(orderInfo.price.deliveryPrice) }}</text>
        </view>
        <view class="totalView" v-if="!hasActive">
          <text class="totalTitle">优惠券</text>
          <text v-if="checkedCoupon" @click="showCouponModel = true" class="totalPrice"
            >{{ checkedCoupon.name }}
          </text>
          <text
            v-else-if="!checkedCoupon && orderInfo.coupons.length > 0"
            @click="showCouponModel = true"
            class="totalPrice"
            >选择优惠券
          </text>
          <text v-else class="totalPrice">无匹配优惠券</text>
        </view>
        <!-- <view class="totalView" v-if="orderInfo.price.couponPrice">
          <text class="totalTitle">优惠券抵扣</text>
          <text class="totalPrice" style="color: #ff2323"
            >-¥{{ formatPrice(orderInfo.price.couponPrice) }}
          </text>
        </view> -->
        <u-line></u-line>
        <view class="jisuan dis-flex">
          <text class="total-goods mr-20">共{{ countGoods }}样商品</text>
          <text class="yh-text">已优惠</text>
          <text class="yh-price mr-20"
            >¥{{ (orderInfo.price.promotionPrice * 0.01).toFixed(2) }}
          </text>
          <text class="heji">合计：</text>
          <text class="total-Price">¥{{ formatPrice(orderInfo.price.payPrice) }}</text>
        </view>
      </view>
      <view class="infoView" v-if="orderInfo.promotions && orderInfo.promotions.length">
        <view class="totalView">
          <text class="totalTitle">优惠明细</text>
        </view>
        <view
          class="dis-flex flex-column"
          v-for="(item, index) in orderInfo.promotions"
          :key="index"
        >
          <u-line></u-line>
          <view class="totalView">
            <text class="totalTitle" style="font-size: 26rpx">{{
              item.description || item.name
            }}</text>
            <text class="totalPrice" style="font-size: 26rpx; color: orange"
              >-¥{{ formatPrice(item.discountPrice) }}</text
            >
          </view>
        </view>
      </view>
      <view class="infoView">
        <view class="totalView">
          <view class="totalTitle">订单备注（选填）</view>
        </view>
        <view class="remark">
          <textarea
            v-model="form.remark"
            style="
              width: calc(100% - 40rpx);
              height: 100rpx;
              flex-shrink: 0;
              margin: 0 20rpx;
              padding: 20rpx;
              font-size: 28rpx;
              border: 1px solid #eee;
            "
            placeholder="请输入备注信息"
          ></textarea>
        </view>
        <!-- 快捷输入标签 -->
        <view v-if="deliveryTab" class="quick-tags">
          <view class="tags-title">常用备注快捷输入：</view>
          <view class="tags-container">
            <view
              v-for="(tag, index) in quickRemarkTags"
              :key="index"
              class="tag-item"
              :class="{ active: selectedRemarkTags.includes(tag) }"
              @click="toggleRemarkTag(tag)"
            >
              {{ tag }}
            </view>
          </view>
        </view>
      </view>
      <view class="footer-fill"></view>
    </view>

    <view v-if="orderInfo" class="bottomView">
      <view class="bt-box dis-flex">
        <view style="flex: 1" v-if="PreType == 2 && isVip == false">
          <view class="totalPrice3"
            >待付款：
            <text>¥{{ (orderInfo.price.totalVipPrice * 0.01).toFixed(2) }}</text>
          </view>
        </view>
        <view style="flex: 1" v-else>
          <view class="totalPrice3"
            >待付款：
            <text>¥{{ (orderInfo.price.payPrice * 0.01).toFixed(2) }}</text>
          </view>
        </view>
        <view>
          <view class="bottomBtn" @click.stop.prevent="onCreateOrder()">下单支付</view>
        </view>
      </view>
    </view>

    <PayPopup v-if="orderInfo" ref="payPopupRef" @close="closePay">
      <p style="font-size: 50rpx; font-weight: 600; padding: 20rpx; text-align: center">
        ¥{{ (settle.payPrice * 0.01).toFixed(2) }}
      </p>
    </PayPopup>

    <view v-if="orderInfo" class="tishi-warpper">
      <u-popup
        class="teshu"
        v-model="showSvipModel"
        backgroundColor="transparent"
        mode="center"
        width="610"
        height="auto"
        border-radius="20"
        :mask-close-able="false"
      >
        <view class="tishi-box">
          <view class="content">
            <view class="tl">温馨提示</view>
            <view class="vip-qy" v-if="cards">
              开通会员，充¥{{ (cards.deductPrice * 0.01).toFixed(0) }}送{{ cards.givePoint }}积分
            </view>
            <view class="des">
              <text>本单立享</text>
              <text class="col bold">{{ discount }}</text>
              <text class="col">折</text>
              <text>优惠</text>
              <text style="color: red; margin-left: 10rpx"
                >¥{{ formatPrice(orderInfo.price.totalPrice - orderInfo.price.totalVipPrice) }}
              </text>
            </view>

            <view class="description" v-if="cards">{{ cards.days }}天有效期 到期前可续费</view>
            <view class="bt" @click="toSvip()">立即开通</view>
          </view>
          <view class="ts-close" @click="showSvipModel = false">
            <u-icon size="28" name="close" color="#ffffff"></u-icon>
          </view>
        </view>
      </u-popup>
    </view>

    <view v-if="orderInfo" class="tishi-warpper">
      <u-popup
        class="teshu"
        v-model="showFirstModel"
        backgroundColor="transparent"
        mode="center"
        width="610"
        height="auto"
        border-radius="20"
        :mask-close-able="false"
      >
        <view class="tishi-box">
          <view class="content">
            <view class="tl">温馨提示</view>
            <view class="vip-qy" v-if="cards">
              开通会员，充¥{{ (cards.deductPrice * 0.01).toFixed(0) }}送{{ cards.givePoint }}积分
            </view>
            <view class="des">
              <text>本单立享</text>
              <text class="col bold">{{ discount }}</text>
              <text class="col">折</text>
              <text>优惠</text>
              <text style="color: red; margin-left: 10rpx"
                >¥{{
                  formatPrice(
                    orderInfo.price.totalPrice - (orderInfo.price.totalPrice * discount) / 10
                  )
                }}
              </text>
            </view>

            <view class="description" v-if="cards">{{ cards.days }}天有效期 到期前可续费</view>
            <view class="bt" @click="toSvip()">立即开通</view>
          </view>
          <view class="ts-close" @click="showFirstModel = false">
            <u-icon size="28" name="close" color="#ffffff"></u-icon>
          </view>
        </view>
      </u-popup>
    </view>

    <u-popup
      v-if="orderInfo"
      v-model="showCouponModel"
      mode="bottom"
      width="750"
      height="750"
      border-radius="20"
    >
      <view class="popup-box">
        <view class="couponTl dis-flex flex-y-between flex-y-center">
          <view class="tl">优惠折扣券</view>
          <u-icon name="/static/close-t.png" size="36" @click="showCouponModel = false"></u-icon>
        </view>
        <scroll-view scroll-y="true" style="height: 650rpx">
          <view class="couponListView">
            <view
              class="couponView"
              :class="!item.match ? 'couponNotCan' : ''"
              v-for="(item, cIndex) in orderInfo.coupons"
              :key="item.id"
            >
              <view class="moneyView" v-if="item.discountType == 1">
                <view class="couponMoney">
                  <text>¥{{ (item.discountPrice * 0.01).toFixed(0) }}</text>
                </view>
              </view>
              <view class="moneyView" v-if="item.discountType == 2">
                <view class="couponMoney">
                  <text>{{ (item.discountPercent * 0.1).toFixed(1) }}折</text>
                </view>
              </view>
              <view class="lineView">
                <view class="circle"></view>
                <view class="line"></view>
                <view class="circle2"></view>
              </view>
              <view class="couponInfoView dis-flex flex-y-between flex-y-center">
                <view class="info dis-flex flex-y-between">
                  <view class="couponTitle">
                    <text>{{ item.name }}</text>
                    <text v-if="item.discountType == 1"
                      >，满{{ (item.usePrice * 0.01).toFixed(2) }}元减{{
                        (item.discountPrice * 0.01).toFixed(2)
                      }}元
                    </text>
                    <text v-else-if="item.discountType == 2"
                      >，满{{ (item.usePrice * 0.01).toFixed(2) }}元打{{
                        (item.discountPercent * 0.1).toFixed(1)
                      }}折，最多减免{{ (item.discountLimitPrice * 0.01).toFixed(2) }}元
                    </text>
                  </view>
                  <!-- <view class="couponLabel">店铺券 联盟卷 平台券</view> -->
                  <view class="InfoView">
                    <view class="couponTime mismatch" v-if="!item.match"
                      >{{ item.mismatchReason }}
                    </view>
                    <view class="couponTime" v-if="item.validityType == 1">
                      有效日期至{{ $u.timeFormat(item.validEndTime, 'yyyy-mm-dd hh:MM') }}
                    </view>
                    <view class="couponTime" v-else
                      >自领取后{{ item.fixedEndTerm || '?' }}天有效
                    </view>
                  </view>
                </view>
                <view
                  class="couponBtn"
                  v-if="item.id != checkedCoupon.id && item.match"
                  @click="onCouponGain(item, cIndex)"
                  >使用
                </view>
                <view class="couponBtn disabled" v-else-if="!item.match">不可使用</view>
                <view class="couponBtn disabled" v-else>已使用</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>

    <u-popup
      v-if="orderInfo"
      v-model="dinePopup"
      mode="bottom"
      width="750"
      height="600"
      border-radius="20"
    >
      <view class="popup-box">
        <view class="couponTl dis-flex flex-y-between flex-y-center">
          <view class="tl">
            <text style="color: orange">详细地址须含楼层/单元/房号，以便送餐上门</text>
          </view>
          <u-icon name="/static/close-t.png" size="36" @click="dinePopup = false"></u-icon>
        </view>
        <view class="pickup-popup">
          <view class="popup-content">
            <view class="form-item">
              <text>配送范围</text>
              <text class="flex-1">{{ dineDetailAddress }}</text>
            </view>
            <view class="form-item">
              <text>详细地址</text>
              <u-input
                v-model="dineRoomNumber"
                type="text"
                :border="true"
                :clearable="true"
                placeholder="请输入楼层/单元/房号"
              />
            </view>
            <view class="form-item">
              <text>联系人</text>
              <u-input
                v-model="orderInfo.address.name"
                type="text"
                :border="true"
                :clearable="true"
                placeholder="请输入联系人姓名"
              />
            </view>
            <view class="form-item">
              <text>联系电话</text>
              <u-input
                v-model="orderInfo.address.mobile"
                type="number"
                :border="true"
                :clearable="true"
                placeholder="请输入联系电话"
              />
            </view>
          </view>
          <view class="popup-footer">
            <button @click="onConfirmUserInfo">确认</button>
          </view>
        </view>
      </view>
    </u-popup>

    <u-popup v-model="showTimePicker" mode="bottom" width="750" height="600" border-radius="20">
      <view class="time-picker-popup">
        <view class="popup-header">
          <text class="title">选择送达时间</text>
          <u-icon name="close" size="36" @click="showTimePicker = false"></u-icon>
        </view>
        <view class="date-tabs">
          <view
            class="tab-item"
            :class="{ active: selectedDate === 'today' }"
            @click="selectedDate = 'today'"
          >
            今日({{ new Date().getMonth() + 1 }}月{{ new Date().getDate() }}日)
          </view>
          <view
            class="tab-item"
            :class="{ active: selectedDate === 'tomorrow' }"
            @click="selectedDate = 'tomorrow'"
          >
            明日({{ new Date().getMonth() + 1 }}月{{ new Date().getDate() + 1 }}日)
          </view>
        </view>
        <scroll-view :scroll-y="true" style="height: 360rpx">
          <view class="time-grid">
            <view
              style="color: orangered"
              v-if="!getTimePeriods(selectedDate) || getTimePeriods(selectedDate).length === 0"
              >该日不能预约</view
            >
            <view
              v-for="(period, index) in getTimePeriods(selectedDate)"
              :key="index"
              class="time-grid-item"
              :class="{ active: form.reservePeriod === period }"
              @click="selectTimePeriod(period)"
            >
              <text>{{ period }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import PayPopup from '@/components/PayPopup.vue'

let systemInfo = uni.getSystemInfoSync()
export default {
  components: {
    PayPopup
  },
  data() {
    return {
      scrollTop: 0,
      background: {
        background: 'transparent'
      },
      background1: {
        background: '#10A28F'
      },
      statusBarHeight: systemInfo.statusBarHeight,
      status: 1,
      showCouponModel: false,
      showSvipModel: false,
      showFirstModel: false,
      resStatus: '',
      group_product_id: '',
      dinePopup: false,
      goodsType: 1, //1-其他商品，2，预售商品
      orderType: 4, //1-当日达订单，2-次日达订单，3-抢购订单
      goodsInfo: [],
      goodsPrice: 0,
      totalPrice: 0,
      pointDeductCount: 0,
      discount: 0,
      pointDeductPriceYuan: 0,
      user_coupon_id: '', //优惠劵id
      payMethod: '',
      settle: {},
      payOrderId: '',
      catIds: [],
      couponList: '',
      checkedCoupon: '',
      orderInfo: null,
      tips: '尊敬的用户，您还未开通平台会员， 您暂时不能享受会员价下单操作！',
      deliveryTab: null, // puckup-自取、takeout-外卖
      dineRoomNumber: '',
      showTimePicker: false,
      selectedDate: 'tomorrow',
      timePeriodsToday: ['11:00', '11:30', '12:00', '12:30', '13:00', '13:30'],
      timePeriodsTomorrow: ['11:00', '11:30', '12:00', '12:30', '13:00', '13:30'],
      form: {
        items: [],
        couponId: '',
        deliveryType: null,
        deliveryTimeType: null, // immediate: 立即配送, scheduled: 预约配送
        reserveDate: null,
        reservePeriod: '',
        dineMode: false,
        dinePeoples: 1,
        addressId: '',
        pickUpStoreId: '',
        receiverName: '',
        receiverMobile: '',
        seckillActivityId: '',
        combinationActivityId: '',
        combinationHeadId: '',
        bargainRecordId: '',
        remark: '',
        channelCode: 'mock',
        useVipPrice: false,
        usePointDeduction: false,
        grouponPackageId: '',
        useCryptocurrencyDeduction: false,
        useFirstOrderDiscount: false
      },
      quickRemarkTags: [
        '到达时请打电话，不要敲门',
        '挂门把手上',
        '放家门口',
        '放公司前台',
        '轻拿轻放'
      ],
      selectedRemarkTags: [],
      res2: '',
      PrePoints: 0,
      PreType: 1, //支付价格 1 原价 2 会员价
      hasActive: false,
      isVip: false,
      cards: null,
      countGoods: 0,
      cryptocurrencyDeductCount: 0,
      cryptocurrencyDeductPriceYuan: 0
    }
  },
  onLoad(res) {
    this.initData(res)
  },
  onPageScroll: function (e) {
    //nvue暂不支持滚动监听，可用bindingx代替
    // console.log("滚动距离为：" + e.scrollTop);
    this.scrollTop = e.scrollTop // 更新滚动位置
  },
  computed: {
    formatPrice() {
      return (e) => {
        // if (e.toString().includes(".")) {
        // 	return e
        // }
        return (Number(e) * 0.01).toFixed(2)
      }
    },
    formatProp() {
      return (e) => {
        let arr = ''
        if (e) {
          e.forEach((item) => {
            arr += item.valueName
          })
        }
        return arr
      }
    },
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    },
    dineDetailAddress() {
      if (!this.orderInfo.address || !this.orderInfo.address.detailAddress) {
        return '配送地址无效'
      }
      return this.orderInfo.address.detailAddress.split(' ')[0]
    }
  },
  onShow() {
    this.$u
      .get('/app-api/member/vip/my', {
        profile: 1,
        cards: 1
      })
      .then((res) => {
        this.isVip = res.data.valid
        this.cards = res.data.cards.length > 0 ? res.data.cards[0] : null
      })
  },
  methods: {
    toSvip() {
      this.showSvipModel = false
      let routeQueryString = ''
      if (this.deliveryTab) {
        routeQueryString += 'deliveryTab=' + this.deliveryTab
      }
      if (this.goodsInfo) {
        if (routeQueryString) {
          routeQueryString += '&'
        }
        routeQueryString += 'items=' + JSON.stringify(this.goodsInfo)
      }
      if (this.grouponPackageId) {
        if (routeQueryString) {
          routeQueryString += '&'
        }
        routeQueryString += 'grouponPackageId=' + this.grouponPackageId
      }
      if (this.seckillActivityId) {
        if (routeQueryString) {
          routeQueryString += '&'
        }
        routeQueryString += 'seckillActivityId=' + this.seckillActivityId
      }
      if (this.combinationActivityId) {
        if (routeQueryString) {
          routeQueryString += '&'
        }
        routeQueryString += 'combinationActivityId=' + this.combinationActivityId
      }
      if (this.combinationHeadId) {
        if (routeQueryString) {
          routeQueryString += '&'
        }
        routeQueryString += 'combinationHeadId=' + this.combinationHeadId
      }
      this.$u.route('/users/svip', {
        returnPage: encodeURIComponent(getCurrentPages()[0].route + '?' + routeQueryString)
      })
    },
    onPreAll(type) {
      if (type == 2) {
        this.discount = (
          (this.orderInfo.price.totalVipPrice / this.orderInfo.price.totalPrice) *
          10
        ).toFixed(1)
        if (this.isVip == false) {
          this.showSvipModel = true
          return
        }
        this.PreType = type
        this.PrePoints = 0
        this.form.useVipPrice = true
        this.form.usePointDeduction = false
        this.form.useCryptocurrencyDeduction = false
        this.form.couponId = ''
        this.checkedCoupon = ''
      } else if (type == 3) {
        if (this.isVip == false) {
          this.discount = (this.orderInfo.firstOrderDiscount * 1).toFixed(1)
          this.showFirstModel = true
          return
        }
        this.PreType = type
        this.form.useFirstOrderDiscount = true
        this.form.useVipPrice = false
        this.form.usePointDeduction = false
        this.form.useCryptocurrencyDeduction = false
        this.form.couponId = ''
        this.checkedCoupon = ''
        this.PrePoints = 0
      } else {
        this.PreType = 1
        this.form.useVipPrice = false
        this.form.useFirstOrderDiscount = false
        this.form.couponId = ''
        this.checkedCoupon = ''
      }
      this.initData()
    },
    onPrePoints(type) {
      this.PrePoints = type
      this.form.useFirstOrderDiscount = false
      this.form.useVipPrice = false
      this.form.couponId = ''
      this.checkedCoupon = ''
      if (type == 1) {
        if (this.orderInfo.totalPoint >= this.pointDeductCount) {
          this.PreType = 1
          this.form.usePointDeduction = true
          this.form.useCryptocurrencyDeduction = false
        } else {
          this.$u.toast('当前积分不足')
          this.PrePoints = 0
          return
        }
      } else if (type == 2) {
        if (
          this.orderInfo.price.totalCryptocurrencyDeductCount < this.orderInfo.totalCryptocurrency
        ) {
          this.PreType = 1
          this.form.useCryptocurrencyDeduction = true
          this.form.usePointDeduction = false
        } else {
          this.$u.toast('当前收益豆不足')
          this.PrePoints = 0
          return
        }
      } else {
        this.form.usePointDeduction = false
        this.form.useCryptocurrencyDeduction = false
        this.PreType = 1
      }

      this.initData()
    },
    checkType(type) {
      this.form.deliveryType = type
    },
    initData(res2) {
      if (res2 && res2.deliveryTab) {
        this.deliveryTab = res2.deliveryTab
      }
      if (this.deliveryTab === null) {
        this.deliveryTab = ''
      }
      if (this.deliveryTab === 'pickup') {
        this.form.deliveryType = 4
      } else if (this.deliveryTab === 'takeout') {
        this.form.deliveryType = 3
      }
      if (this.deliveryTab) {
        this.form.dineMode = true
      } else {
        this.form.dineMode = false
      }
      this.goodsInfo = res2 && res2.items ? JSON.parse(res2.items) : ''
      if (this.goodsInfo) {
        this.form.items = this.goodsInfo.map((item) => {
          return {
            skuId: item.skuId,
            count: item.count,
            cartId: item.cartId
          }
        })
      }
      this.form.seckillActivityId = res2 && res2.seckillActivityId ? res2.seckillActivityId : ''
      this.form.grouponPackageId = res2 && res2.grouponPackageId ? res2.grouponPackageId : ''
      this.form.combinationActivityId =
        res2 && res2.combinationActivityId ? res2.combinationActivityId : ''
      this.form.combinationHeadId = res2 && res2.combinationHeadId ? res2.combinationHeadId : ''
      if (this.form.seckillActivityId || this.form.combinationActivityId) {
        this.hasActive = true
      }
      this.$u.post('/app-api/trade/order/settlement', this.form).then((res) => {
        if (res.code !== 0) {
          uni.dialog.alert(
            '温馨提示',
            res.msg,
            () => {
              uni.navigateBack()
            },
            '我知道了'
          )
          return
        }
        this.settle = res.data.price
        this.orderInfo = res.data
        try {
          this.dineRoomNumber = this.orderInfo.address.detailAddress.split(' ')[1]
        } catch (e) {
          console.error('dineRoomNumber', e)
        }
        if (this.orderInfo.firstOrderDiscount <= 0 || this.orderInfo.firstOrderDiscount >= 10) {
          this.discount = this.orderInfo.vipDiscount.toFixed(1)
        } else {
          this.discount = this.orderInfo.firstOrderDiscount.toFixed(1)
        }
        this.form.addressId = res.data.address?.id
        if (
          this.orderInfo.supportDeliveryTypes &&
          this.orderInfo.supportDeliveryTypes.length > 0 &&
          !this.form.deliveryType
        ) {
          this.form.deliveryType = this.orderInfo.supportDeliveryTypes[0]
        }
        let _pointDeductCount = 0
        let _pointDeductPriceYuan = 0
        let _cryptocurrencyDeductCount = 0
        let _cryptocurrencyDeductPriceYuan = 0
        res.data.items.forEach((item) => {
          _pointDeductCount += item.pointDeductCount * item.count
          _cryptocurrencyDeductCount += item.cryptocurrencyDeductCount * item.count
          _cryptocurrencyDeductPriceYuan += item.cryptocurrencyDeductPriceYuan * item.count
          _pointDeductPriceYuan += item.pointDeductPriceYuan * 100 * item.count
        })
        this.pointDeductCount = _pointDeductCount
        this.pointDeductPriceYuan = _pointDeductPriceYuan
        this.cryptocurrencyDeductCount = _cryptocurrencyDeductCount
        this.cryptocurrencyDeductPriceYuan = _cryptocurrencyDeductPriceYuan
        this.countGoods = res.data.items.length
        this.timePeriodsToday = []
        if (res.data.shop && res.data.shop.openingTime && res.data.shop.closingTime) {
          this.timePeriodsToday = this.generateTodayPeriods(
            res.data.shop.openingTime,
            res.data.shop.closingTime
          )
        }
        this.timePeriodsTomorrow = []
        if (res.data.shop && res.data.shop.openingTime && res.data.shop.closingTime) {
          this.timePeriodsTomorrow = this.generateTimePeriods(
            res.data.shop.openingTime,
            res.data.shop.closingTime
          )
        }
      })
    },
    onCouponGain(e) {
      this.checkedCoupon = e
      this.form.couponId = e.id
      this.showCouponModel = false
      this.initData()
    },
    onConfirmUserInfo() {
      if (!this.dineRoomNumber) {
        this.$u.toast('请填写楼层/单元/房号')
        return
      }
      if (!this.orderInfo.address.name) {
        this.$u.toast('请填写联系人姓名')
        return
      }
      if (!this.orderInfo.address.mobile) {
        this.$u.toast('请填写手机号码')
        return
      }
      if (!/^1[3-9]\d{9}$/.test(this.orderInfo.address.mobile)) {
        this.$u.toast('手机号码格式不正确')
        return
      }
      this.dinePopup = false
      uni.showLoading()
      this.$u
        .post('/app-api/member/address/save-dine', {
          name: this.orderInfo.address.name,
          mobile: this.orderInfo.address.mobile,
          detailAddress: this.dineDetailAddress + ' ' + this.dineRoomNumber,
          countyCode: this.orderInfo.address.countyCode
        })
        .then((res) => {
          uni.hideLoading()
          if (res.code != 0) {
            this.$u.toast(res.msg)
          }
        })
        .catch(() => {
          uni.hideLoading()
        })
    },
    onPickupAddress() {
      if (this.deliveryTab === 'takeout') {
        this.dinePopup = true
        return
      }
      uni.$on('manage', (e) => {
        this.form.receiverName = e.name
        this.form.receiverMobile = e.mobile
        this.form.addressId = e.id
        this.initData(this.res2)
        uni.$off('manage')
      })
      this.$utils.route('/other/address-manage/address-manage?isCheck=' + true)
    },
    toggleRemarkTag(tag) {
      const index = this.selectedRemarkTags.indexOf(tag)
      if (index > -1) {
        // 如果标签已选中，则移除
        this.selectedRemarkTags.splice(index, 1)
      } else {
        // 如果标签未选中，则添加
        this.selectedRemarkTags.push(tag)
      }
      // 更新备注内容
      this.updateRemarkWithTags()
    },
    updateRemarkWithTags() {
      // 保留用户手动输入的内容，只更新标签部分
      let remark = this.form.remark
      // 移除之前添加的标签（如果有）
      this.quickRemarkTags.forEach((tag) => {
        remark = remark.replace(`【${tag}】`, '')
      })
      // 清理多余空格和换行
      remark = remark.trim()
      // 添加当前选中的标签
      if (this.selectedRemarkTags.length > 0) {
        const tagsText = this.selectedRemarkTags.map((tag) => `【${tag}】`).join(' ')
        remark = tagsText + (remark ? ' ' + remark : '')
      }
      this.form.remark = remark
    },
    selectDeliveryTime(type) {
      this.form.deliveryTimeType = type
      if (type === 'immediate') {
        this.showTimePicker = false
        this.form.reserveDate = null
        this.form.reservePeriod = ''
      } else {
        this.showTimePicker = true
      }
    },
    generateTodayPeriods(openingTime, closingTime) {
      const periods = []
      const now = new Date()
      const openingDate = new Date(openingTime)
      const closingDate = new Date(closingTime)
      const startDate = new Date(
        now.getFullYear(),
        now.getMonth(),
        now.getDate(),
        openingDate.getHours(),
        openingDate.getMinutes()
      )
      const endDate = new Date(
        now.getFullYear(),
        now.getMonth(),
        now.getDate(),
        closingDate.getHours(),
        closingDate.getMinutes()
      )
      // 如果结束时间小于开始时间，说明跨天
      if (endDate < startDate) {
        endDate.setDate(endDate.getDate() + 1)
      }
      // 每10分钟生成一个时间点
      let currentTime = new Date(startDate)
      // 如果营业开始时间早于当前时间，则从当前时间开始
      if (currentTime < now) {
        currentTime = new Date(now)
        // 只能预约1小时后，不然备菜可能来不及
        currentTime.setHours(currentTime.getHours() + 1)
        // 调整到下一个10分钟的时间点
        const minutes = currentTime.getMinutes()
        const roundedMinutes = Math.ceil(minutes / 10) * 10
        currentTime.setMinutes(roundedMinutes)
        currentTime.setSeconds(0)
        currentTime.setMilliseconds(0)
      }
      while (currentTime <= endDate) {
        const timeStr = this.formatTime(currentTime)
        periods.push(timeStr)
        // 增加10分钟
        currentTime.setMinutes(currentTime.getMinutes() + 10)
      }
      return periods
    },
    generateTimePeriods(openingTime, closingTime) {
      const periods = []
      const startDate = new Date(openingTime)
      const endDate = new Date(closingTime)
      // 如果结束时间小于开始时间，说明跨天
      if (endDate < startDate) {
        endDate.setDate(endDate.getDate() + 1)
      }
      // 每10分钟生成一个时间点
      let currentTime = new Date(startDate)
      while (currentTime <= endDate) {
        const timeStr = this.formatTime(currentTime)
        periods.push(timeStr)
        // 增加10分钟
        currentTime.setMinutes(currentTime.getMinutes() + 10)
      }
      return periods
    },
    getTimePeriods(date) {
      return date === 'today' ? this.timePeriodsToday : this.timePeriodsTomorrow
    },
    selectTimePeriod(period) {
      this.form.reservePeriod = period
      const selectedDate =
        this.selectedDate === 'today'
          ? new Date()
          : new Date(new Date().setDate(new Date().getDate() + 1))
      this.form.reserveDate = this.formatDate(selectedDate)
      this.showTimePicker = false
    },
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    formatTime(date) {
      const hours = date.getHours().toString().padStart(2, '0')
      const minutes = date.getMinutes().toString().padStart(2, '0')
      return `${hours}:${minutes}`
    },
    onDinePeoples(e) {
      this.form.dinePeoples = e.value
    },
    onCreateOrder() {
      if (!this.form.deliveryTimeType) {
        this.$u.toast('请选择配送时间')
        return
      }
      if (this.form.deliveryTimeType === 'scheduled' && !this.form.reservePeriod) {
        this.$u.toast('请选择预约配送时间')
        return
      }
      if (this.deliveryTab === 'takeout' && !this.dineRoomNumber) {
        this.$u.toast('请填写楼层/单元/房号')
        this.dinePopup = true
        return
      }
      if (this.deliveryTab === 'takeout' && !this.orderInfo.address.name) {
        this.$u.toast('请填写联系人姓名')
        this.dinePopup = true
        return
      }
      if (this.deliveryTab === 'takeout' && !this.orderInfo.address.mobile) {
        this.$u.toast('请填写手机号码')
        this.dinePopup = true
        return
      }
      if (this.PreType == 2 && this.isVip == false) {
        this.showSvipModel = true
        return
      }
      if (this.payOrderId) {
        uni.dialog.alert('温馨提示', '请勿重复下单，是否查看订单付情况？', () => {
          this.goToOrderList()
        })
        return
      }
      this.$u.post('/app-api/trade/order/create', this.form).then((res) => {
        if (res.code !== 0) {
          uni.dialog.alert('温馨提示', res.msg)
          return
        }
        this.payOrderId = res.data.tradeNo
        this.$refs.payPopupRef.open(
          this.payOrderId,
          '',
          res.data.price === 0,
          '/goods/order-list/order-list'
        )
      })
    },
    closePay() {
      uni.redirectTo({
        url: '/goods/order-list/order-list'
      })
    }
  }
}
</script>

<style>
@import url('order-confirm.css');

page {
  background: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.open-vip {
  padding: 20rpx;

  .vip-tl {
    padding-bottom: 10rpx;

    .bt {
      width: 150rpx;
      height: 50rpx;
      background: linear-gradient(90deg, #f5cd71, #f5e39d);
      border-radius: 25rpx;
      font-size: 24rpx;
      color: #995406;
    }
  }
}

.vip-qy {
  font-weight: 600;
  font-size: 28rpx;
  color: #333333;
  margin: 10rpx 0;
}

.description {
  font-size: 24rpx;
  color: #999999;
}

.des {
  font-size: 28rpx;
  color: #333333;

  .col {
    color: #fa453c;
  }

  .bold {
    font-size: 36rpx;
    margin: 0 2rpx;
  }
}

.jisuan {
  justify-content: flex-end;
  padding: 30rpx 20rpx;
  align-items: flex-end;

  .total-goods {
    font-size: 28rpx;
    color: #333333;
  }

  .yh-text {
    font-size: 26rpx;
    color: #666666;
    padding-bottom: 2rpx;
  }

  .yh-price {
    font-size: 26rpx;
    color: orangered;
    padding-bottom: 2rpx;
  }

  .heji {
    font-size: 28rpx;
  }

  .total-Price {
    font-size: 32rpx;
    color: #fa453c;
  }
}

.popup-box {
  padding: 0;

  .couponTl {
    padding: 0 20rpx;
    height: 100rpx;
    background: #f5f5f5;
  }

  .couponListView {
    padding: 30rpx 20rpx;

    .couponView {
      display: flex;
      height: 161rpx;
      margin-bottom: 19rpx;

      .moneyView {
        background-color: #10a28f;
        width: 160rpx;
        color: #ffffff;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;

        .couponMoney {
          font-size: 36rpx;
          margin-bottom: 10rpx;

          text {
            font-size: 56rpx;
            font-weight: 600;
          }
        }

        .couponTips {
          font-size: 24rpx;
        }
      }

      .couponInfoView {
        flex: 1;
        background: #ffffff;
        border-radius: 8rpx;
        border: 1px solid #e6e6e6;
        margin-left: -15rpx;
        padding: 20rpx;

        .info {
          height: 100%;
          flex-flow: column;
          flex: 1;

          .couponTitle {
            font-size: 30rpx;
            color: #333333;
          }

          .couponLabel {
            font-size: 20rpx;
            color: #fa453c;
            border-radius: 20rpx;
            border: 1px solid #fa453c;
            padding: 2rpx 0;
            width: 109rpx;
            text-align: center;
            // height: 40rpx;
            // line-height: 40rpx;
          }

          .couponTime {
            font-size: 20rpx;
            color: #999999;
          }

          .mismatch {
            color: #fa453c;
          }
        }

        .couponBtn {
          // width: 96rpx;
          height: 48rpx;
          background: #10a28f;
          border-radius: 23rpx;
          font-size: 26rpx;
          color: #ffffff;
          line-height: 48rpx;
          text-align: center;
          padding: 0 15rpx;
        }

        .disabled {
          background: #cccccc;
        }
      }

      .lineView {
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        margin-left: -15rpx;
        height: 161rpx;
        position: relative;

        .circle {
          width: 30rpx;
          height: 30rpx;
          border-radius: 50%;
          background: #fff;
          margin-top: -15rpx;
          border: 1px solid #e6e6e6;
        }

        .circle2 {
          width: 30rpx;
          height: 30rpx;
          border-radius: 50%;
          background: #fff;
          margin-bottom: -15rpx;
          border: 1px solid #e6e6e6;
        }

        .line {
          flex: 1;
          width: 1rpx;
          /* 设置元素的宽度 */
          background-color: #e6e6e6;
          /* 左边虚线 */
        }
      }
    }

    .couponNotCan {
      .moneyView {
        background-color: #cccccc;
      }
    }
  }
}

::v-deep.tishi-warpper .teshu .u-mode-center-box {
  background-color: transparent !important;
}

.tishi-box {
  position: relative;
  display: flex;
  flex-flow: column;

  .content {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
  }

  .ts-close {
    margin: auto;
    margin-top: 50rpx;
    width: 64rpx;
    height: 64rpx;
    border: 4rpx solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.content {
  text-align: center;

  .tl {
    padding: 20rpx 0 40rpx 0;
    margin: auto;
    font-weight: 600;
    font-size: 34rpx;
    color: #333333;
  }

  .des {
    font-size: 30rpx;
    line-height: 50rpx;
    padding: 0 40rpx;
  }

  .bt {
    width: 280rpx;
    height: 80rpx;
    background: #10a28f;
    border-radius: 40rpx;
    margin: auto;
    margin-top: 70rpx;
    margin-bottom: 10rpx;
    line-height: 80rpx;
    font-size: 34rpx;
    color: #ffffff;
  }
}

.pickup-popup {
  height: 500rpx;

  .popup-content {
    padding: 30rpx;
  }

  .form-item {
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
  }

  .form-item text {
    width: 150rpx;
    color: #666;
  }

  .popup-footer button {
    background-color: #10a28f;
    color: #fff;
    border: none;
    margin: 0 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 80rpx;
  }
}

.quick-tags {
  margin: 20rpx;

  .tags-title {
    font-size: 26rpx;
    color: #666666;
    margin-bottom: 15rpx;
  }

  .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15rpx;

    .tag-item {
      padding: 8rpx 20rpx;
      background-color: #f5f5f5;
      border-radius: 30rpx;
      border: 1px solid #10a28f;
      font-size: 24rpx;
      color: #10a28f;

      &.active {
        background-color: #10a28f;
        color: #ffffff;
      }
    }
  }
}

.delivery-time-section {
  background: #fff;
  margin: 0 20rpx;
  border-radius: 10rpx;
  padding: 20rpx;
}

.time-option {
  padding: 20rpx 0;
  border-top: 1px solid #eee;
}

.option-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.option-label {
  font-size: 30rpx;
  color: #333;
}
.time-picker-popup {
  background: #fff;
  padding: 30rpx;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .title {
      font-size: 36rpx;
      color: #333;
    }
  }

  .date-tabs {
    display: flex;
    gap: 20rpx;
    margin-bottom: 30rpx;

    .tab-item {
      padding: 15rpx 30rpx;
      border: 1px solid #ddd;
      border-radius: 10rpx;
      font-size: 28rpx;
      color: #666;

      &.active {
        background: #10a28f;
        color: #fff;
        border-color: #10a28f;
      }
    }
  }
  .time-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); // 每行3列
    gap: 20rpx;
    padding: 20rpx;
    height: auto;

    .time-grid-item {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20rpx 10rpx;
      background: #f5f5f5;
      border-radius: 10rpx;
      font-size: 28rpx;
      color: #333;
      min-height: 60rpx;

      &.active {
        background: #e6f7ff;
        border: 1px solid #10a28f;
        color: #10a28f;
      }
    }
  }
}
</style>
